<template>
  <div v-for="(item, i) in groups.keys()" :ref="
  el => {
    if (el) charts[i] = el;
  }" style="width: 100%; height: 300px; margin-bottom: 10px; background: #fff"></div>
</template>
<script setup>
import { useStore } from 'vuex';
import { ref, watch, inject, onMounted, onUnmounted } from 'vue';

import * as echarts from 'echarts';
import refresher from '@/libs/autoRefreshShares';

const echartsOption = {
  grid: {
    left: '20px',
    right: '40px',
    bottom: '10px',
    top: '50px',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: true
    },
    alwaysShowContent: false
  },
  legend: {
    show: true,
    selectedMode: false,
    data: []
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      formatter: '{value}'
    },
    axisPointer: {
      show: true,
      label: {
        show: true,
        formatter: '{value}'
      }
    },
    data: []
  },
  yAxis: [
    {
      type: 'value',
      name: '上证',
      position: 'left',
      min: 2300,
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '涨幅',
      position: 'right',
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: []
};

const $store = useStore();
const $http = inject('$http');
const $eventBus = inject('$eventBus');

const charts = ref([]);
const groups = ref(new Map());

function renderIndexes () {
  $http.get('/api/shares/index/statistics', { hideTip: true }).then(res => {
    groups.value.clear();

    (res.datas || []).forEach(d => {
      let group = groups.value.get(d.Name) || [];

      group.push(d);
      groups.value.set(d.Name, group);
    });
  });
}

function resizeChartPanel (area) {

}

watch(groups, () => {
  setTimeout(() => {
    let keys = [];
    let index = 0;

    groups.value.forEach((val, key) => {
      let series = [];
      let currentIndexs = [];
      let comparedIndexs = [0];
      let echartsInstance = echarts.init(charts.value[index]);

      val.forEach(m => {
        if (currentIndexs.length > 0) {
          comparedIndexs.push((m.Index - parseFloat(currentIndexs[currentIndexs.length - 1])).toFixed(2));
        }

        currentIndexs.push(m.Index.toFixed(2));
      });

      series.push({
        name: '当前指数',
        type: 'line',
        smooth: true,
        yAxisIndex: 0,
        data: currentIndexs,
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        }
      });

      series.push({
        name: '涨幅',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        data: comparedIndexs
      });

      echartsOption.series = series;
      echartsOption.yAxis[0].name = key;
      echartsOption.xAxis.data = val.map(r => r.RecordDateTime)

      echartsInstance.setOption(echartsOption);

      index++;
    }, 400);
  });
}, { deep: true });

onMounted(() => {
  resizeChartPanel($store.state.area.content);

  renderIndexes();

  refresher.start({
    step ({ visible, number }) { },
    done () {
      renderIndexes();
    }
  });

  $eventBus.on('windowResizeChanged', client => resizeChartPanel(client));
});

onUnmounted(() => {
  refresher.stop();
});
</script>
<style lang="less" scoped>
:deep(.chart-tooltip-line2) {
  padding: 0;
  margin: 5px 0 0 0;

  >b {
    width: 100%;
    display: block;
    text-indent: 15px;

    &:first-of-type {
      text-indent: 0;
    }
  }
}
</style>